<%--
  Created by IntelliJ IDEA.
  User: wyp
  Date: 2020/5/27
  Time: 18:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./resources/lib/layui/css/main.css">
    <link rel="stylesheet" type="text/css" href="./resources/lib/layui/css/layui.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./resources/css/bootstrap.css" />
    <link rel="stylesheet" href="./resources/css/style.css" type="text/css" media="all"/>
    <!--引入JQuery，必须要在bootstrap.js之前引入-->
    <script type="text/javascript" src="./resources/js/jquery-3.4.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="./resources/js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路详情</title>
</head>
<body>

<!--头部文件-->
<%@include file="WEB-INF/view/index/top.jsp"%>

<!--搜索文件-->
<%@include file="WEB-INF/view/index/navigation.html"%>

<!--中间部分1-->
<script>
    // 获取地址栏参数（中文乱码）
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    $(document).ready(function () {
        console.log("页面载入");
        // 获取地址栏id
        var touristId = getQueryVariable("touristId");
        console.log("获取ID："+touristId);
        touristList(touristId);
    });

    //向服务器发送ajax请求
    function touristList(touristId) {
        $.ajax({
            type: "POST",
            dataType: "json",
            data:{"method":"routesDetail","touristId":touristId},
            url:"./routesController",
            success:function (data) {
                console.log("userId:"+getQueryVariable("userId"));
                outTourist(data);
            }
        });
        return false;
    };

    //输出服务器返回的json数据
    function outTourist(data) {
        //将公司ID存入touristCompanyId控件中 不可见.用户Id同理userId

        if(getQueryVariable("userId")){
            document.getElementById("userId").value= getQueryVariable("userId");
            console.log("存进去的id:"+getQueryVariable("userId"));
        }
        document.getElementById("touristCompanyId").value= data.touristCompanyId;
        document.getElementById("routeImg").src = "./"+data.routesImg;
        // 添加title
        var title = "<h3>";
        title += data.allSpot+" + "+data.restaurant+" + "+data.live+" + "+data.traffice+" + "+data.touristTime;
        title +="</h3>"
        $("#title").html(title);
        // 添加价格
        var price = "";
        price = "<i>￥</i>"+data.touristPrice;
        $("#price").html(price);
        //添加剩余人数
        var nowPeople = data.maxPeople - data.nowPeople ;
        $("#nowPeople").html(nowPeople);
        //添加负责人电话
        var tel = data.tel;
        $("#tel").html(tel);
        //添加预约按钮
        if(nowPeople<1){
            var button = "<button class=\"layui-btn layui-btn-primary \" disabled=\"true\"" +
                    "style=\"border:1px solid #A2B5CD; color: #A2B5CD;width: 116px; height: 40px; line-height: 40px;\""+
                ">立刻预约</button>";
            $("#routesOrder").html(button);
        }
    };

    //按下立即预约按钮，发送ajax请求
    function orderAdd() {
        //获取参数
        var userId = $('#userId').val();
        console.log("orderAdd:"+userId);
        console.log("orderAdd:"+typeof(userId));
        if( userId === "" || userId == null || userId === "null" || userId==="undefined"){
            alert("您还未登陆，请登陆！");
            window.location.href='./login';
        }else {
            var touristCompanyId = $('#touristCompanyId').val();
            // 获取地址栏id
            var touristId = getQueryVariable("touristId");

            $.ajax({
                type:"POST",
                data:{"method":"orderAdd","userId":userId,"touristCompanyId":touristCompanyId,
                    "touristId":touristId},
                url:"./routesController",
                dataType:"json",
                success:function (data) {
                    alert("预约成功！");
                    window.location.reload();
                },
                error:function (data) {
                    alert("预约失败！");
                }
            });
        }

    }

</script>
<%--用来存储userId--%>
<input type="text" style="display: none" id="userId" name="userId">
<%--用来存储touristCompanyId--%>
<input type="text" style="display: none" id="touristCompanyId" name="touristCompanyId">

<%--页面主体开始--%>
<div class="content content-nav-base datails-content" style="padding-top: 2%">
    <div class="data-cont-wrap w1200">
    <div class="product-intro layui-clear">
        <div class="preview-wrap" >
            <a href="javascript:;"><img src="" id="routeImg" width="700px"></a>
        </div>
        <div class="itemInfo-wrap">
            <div class="itemInfo" style="float: right;width: 50%;">
                <div class="title" id="title">
                </div>
                <div class="summary">
                    <p class="activity"><span>活动价</span><strong class="price" id="price">800.00</strong></p>
                    <p class="address-box"><span>剩余名额</span><strong class="address" id="nowPeople">50</strong></p>
                </div>
                <div class="choose-attrs">
                    <div class="color layui-clear"><span class="title">咨询电话</span>  <span id="tel">17750185520</span></div>

                </div>
                <div class="choose-btns" id="routesOrder">
                    <button class="layui-btn layui-btn-primary purchase-btn" onclick="orderAdd()" >立刻预约</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<%--页面主体结束--%>

<!--尾部文件-->
<%@include file="WEB-INF/view/index/footer.html"%>

</body>
</html>
